<!--
 * @Author       : 许警
 * @Date         : 2024-04-24 13:29:14
 * @LastEditors  : 许警
 * @LastEditTime : 2024-05-20 11:04:56
 * @FilePath     : /src/views/content/translate/list/components/addModal.vue
 * @Description  : 
-->
<template>
  <a-modal  v-model:visible="modalVisible"
  :title="title"
  :footer="null"
  :closable="false"
  :maskClosable="false"
  >
    <div style="padding: 0 20px 20px 20px">
      <a-form
        ref="editRef"
        :model="editForm"
        :rules="rules"
        :label-col="labelCol"
        :wrapper-col="wrapperCol"
      >
        <a-form-item label="渠道名称" name="source">
          <a-input
            placeholder="请输入渠道名称"
            v-model:value="editForm.source"
          ></a-input>
        </a-form-item>

        <a-form-item label="渠道简称" name="organName">
          <a-input
            placeholder="请输入渠道简称的英文/拼音名称"
            v-model:value="editForm.organName"
          ></a-input>
        </a-form-item>
        <!-- editForm.serviceId -->
        <a-form-item label="绑定服务" name="serviceId">
          <a-select
            ref="select"
            show-search
            mode="multiple"
            :filter-option="filterOption"
            :max-tag-count="10"
            :max-tag-text-length="10"
            v-model:value="editForm.serviceId"
            placeholder="请选择服务"
          >
            <a-select-option
              v-for="item in serviceList"
              :value="item.id"
              :key="item.id"
              :title="item.name"
              >{{ item.name }}
            </a-select-option>
          </a-select>
        </a-form-item>
      </a-form>
      <a-row>
        <a-col :span="4" :offset="8" >
          <a-button type="primary" @click="save" class="d-a-center"
            >保存</a-button
          >
        </a-col>
        <a-col :span="4"  :offset="2">
          <a-button type="info" @click="cancel" class="d-a-center"
            >关闭</a-button
          >
        </a-col>
      </a-row>
    </div>
  </a-modal>
</template>

<script>
import { onMounted, reactive, ref, toRefs, computed, watch } from 'vue'
import { rulesObj } from '../data'
import { insertOrUpdatePlaceOrgan } from '@/api/content/translate'
import { selectServiceInfoById } from '@/api/order/index'

import * as api from "@/api/setting/index";

export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    selectData: {
      default: ()=> {}
    }
  },
  setup(props, { emit, attrs }) {

    const data = reactive({
      searchForm: {},
      list: [], //管理员列表是
      editForm: {
        avatarJson: 'http://loto.oss-cn-shanghai.aliyuncs.com/email/f35998b9e9d942c3.jpg',
      },
      // 部门列表
      serviceList: [],
      // 角色列表
      roleList: [],
      
      editDepForm: {},
      visibleDep: false,
      title: '新增',
    });
    let sexList = [{value: 0, label: '男'},{value: 1, label: '女'}]
     // 表单验证
    let rules = rulesObj

    const modalVisible = computed({
      get: () => props.visible,
      set: val => {
        emit('update:visible', val)
      }
    })
    watch(() => props.selectData, (newVal, oldVal) => {  
      console.log('Number changed from', oldVal, 'to', newVal); 
      detail(); // 调用 detail 方法  
    });  

    const initData = async()=>{
      // 部门列表
      selectServiceInfoById().then((r) => {
        data.serviceList = r.object
      });
      
    }
    initData()

    const detail = async()=>{
      if(props.selectData.id) {
        data.title = "编辑"
        data.editForm = {
          serviceId: props.selectData.organServices.map(item=>item.serviceId + ''),
          source: props.selectData.source,
          organName: props.selectData.organName,
          id: props.selectData.id,
        }
      
      }
    }
    const cancel = () => {
      data.editForm = {}
      emit('update:visible', false)
    }

    const editRef = ref("");
    

    const save = () => {
      console.log(data.editForm, "表单内容");
      editRef.value
        .validate()
        .then(async () => {
          let res = {};
          let form = {
            ...data.editForm,
            // id: props.id
          }
          res = await insertOrUpdatePlaceOrgan(data.editForm);
          if (res.success) {
            cancel();
            emit('closeModal')
          }
        })
        .catch((error) => {});
    }
    const filterOption = (input, option) => {
      return option.title.toLowerCase().indexOf(input.toLowerCase()) >= 0;
    };
    return {
      ...toRefs(data),
      modalVisible,
      editRef,
      sexList,
      filterOption,
      labelCol: {
        style: {
          fontWeight: "bold",
          width: "100px",
        },
      },
      wrapperCol: {
        offset: 1,
      },
      rules,
      save,
      cancel
    }
  }
}
</script>
<style scoped>

</style>
